<template>
  <div class="layout">
    <el-container v-if="state.showMenu" class="container">
      <el-aside class="aside">
        <div class="head">
          <div>
            <img src="@/assets/logo.jpg" alt="logo">
            <div class="name">
              <div>贝安臻选管理平台
              </div>
              <div>BEIANZHENXUAN</div>
            </div>
          </div>
        </div>
        <el-menu background-color="#F5F6FA" text-color="#5A607F" :router="true" :default-openeds="state.defaultOpen"
          :default-active='state.currentPath'>
          <el-menu-item index="/" v-if="state.role != 201"><el-icon>
              <Odometer />
            </el-icon>首页</el-menu-item>
          <el-menu-item index="/category" v-if="state.role != 201"><el-icon>
              <Menu />
            </el-icon>分类管理</el-menu-item>
          <el-menu-item index="/good"><el-icon>
              <Goods />
            </el-icon>商品管理</el-menu-item>
          <el-menu-item index="/brand"><el-icon>
              <Collection />
            </el-icon>品牌管理</el-menu-item>
          <el-menu-item index="/integral" v-if="state.role != 201"><el-icon>
              <List />
            </el-icon>积分商品</el-menu-item>
          <el-menu-item index="/guest"><el-icon>
              <User />
            </el-icon>会员管理</el-menu-item>
          <el-menu-item index="/coupon" v-if="state.role != 201"><el-icon>
              <PriceTag />
            </el-icon>优惠券管理</el-menu-item>
          <el-menu-item index="/order"><el-icon>
              <Sell />
            </el-icon>订单管理</el-menu-item>
          <!-- <el-menu-item index="/integralOrder" v-if="state.role != 201"><el-icon>
              <Tickets />
            </el-icon>积分订单</el-menu-item> -->
          <el-menu-item index="/backOrder"><el-icon>
              <Goods />
            </el-icon>退款订单</el-menu-item>
          <el-menu-item index="/commont"><el-icon>
              <Goods />
            </el-icon>评价管理</el-menu-item>
          <!-- <el-menu-item index="/promotion"><el-icon>
              <Goods />
            </el-icon>促销管理</el-menu-item> -->
          <div class="title" v-if="state.role != 201">小程序配置</div>
          <el-menu-item index="/swiper" v-if="state.role != 201"><el-icon>
              <Picture />
            </el-icon>轮播图配置</el-menu-item>
          <el-menu-item index="/hot" v-if="state.role != 201"><el-icon>
              <StarFilled />
            </el-icon>热销商品配置</el-menu-item>
          <el-menu-item index="/new" v-if="state.role != 201"><el-icon>
              <Sell />
            </el-icon>新品上线配置</el-menu-item>
          <el-menu-item index="/recommend" v-if="state.role != 201"><el-icon>
              <ShoppingCart />
            </el-icon>为你推荐配置</el-menu-item>
          <div class="title">设置</div>
          <el-menu-item index="/account"><el-icon>
              <Lock />
            </el-icon>修改密码</el-menu-item>
        </el-menu>
      </el-aside>
      <el-container class="content">
        <Header />
        <div class="main">
          <router-view />
        </div>
        <Footer />
      </el-container>
    </el-container>
    <el-container v-else class="container">
      <router-view />
    </el-container>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import axios from '@/utils/axios'
import { localGet, pathMap, localSet } from '@/utils'

const noMenu = ['/login']
const router = useRouter()
const state = reactive({
  showMenu: false,
  defaultOpen: ['1', '2', '3', '4'],
  currentPath: '/',
  role: null,
})
// 初始化执行方法
onMounted(() => {
  if (localGet('token')) {
    getUserInfo()
  }
})
const getUserInfo = async () => {
  const userInfo = await axios.get('/adminUser/profile')
  state.role = userInfo.role
  localSet('userInfo', userInfo)
}
router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    // 如果路径是 /login 则正常执行
    next()
    state.showMenu = !noMenu.includes(to.path)
  } else {
    // 如果不是 /login，判断是否有 token
    if (!localGet('token')) {
      // 如果没有，则跳至登录页面
      next({ path: '/login' })
      state.showMenu = noMenu.includes(to.path)
    } else {
      // 否则继续执行
      next()
      state.showMenu = !noMenu.includes(to.path)
    }
  }
  // state.showMenu = !noMenu.includes(to.path)
  state.currentPath = to.path
  document.title = pathMap[to.name]
})
</script>

<style scoped>
.layout {
  min-height: 100vh;
  background-color: #ffffff;
}

.container {
  height: 100vh;
}

.aside {
  width: 200px !important;
  background-color: #fff;
}

.el-aside::-webkit-scrollbar {
  display: none;
}

.el-menu {
  padding-top: 10px;
  height: calc(100vh - 50px);
}

.el-menu-item {
  margin: 0 10px;
  height: 44px;
  line-height: 44px;
  border-radius: 5px;
  color: #5A607F;
}

.el-menu-item.is-active {
  background: #1E5EFF;
  color: #fff;
}

.title {
  font-size: 12px;
  color: #A1A7C4;
  margin: 20px 0 10px;
  padding-left: calc(var(--el-menu-base-level-padding) + var(--el-menu-level) * var(--el-menu-level-padding));
}

.head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}

.head>div {
  display: flex;
  align-items: center;
}

.head img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.head span {
  font-size: 20px;
  color: #ffffff;
}

.name div:first-child {
  font-size: 14px;
  font-weight: bold;
}

.name div:last-child {
  font-size: 13px;
}

.line {
  border-top: 1px solid hsla(0, 0%, 100%, .05);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.content {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
}

.main {
  height: calc(100vh - 100px);
  overflow: auto;
  padding: 30px;
}
</style>

<style>
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.el-menu {
  border-right: none !important;
}

.el-submenu {
  border-top: 1px solid hsla(0, 0%, 100%, .05);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.el-submenu:first-child {
  border-top: none;
}

.el-submenu [class^="el-icon-"] {
  vertical-align: -1px !important;
}

.el-button a {
  color: #fff;
}

a {
  color: #409eff;
  text-decoration: none;
}

.el-pagination {
  text-align: center;
  margin-top: 20px;
}

.el-popper__arrow {
  display: none;
}

.el-pagination {
  justify-content: center;
}

.flex {
  display: flex;
  flex-direction: row;
}

.flex-a {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-b {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex-d {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>